<div>

  <div class="text-center hk-urls-list hk-spinner-container" ng-hide="unboundendpoints">
    <div class="spinner spinner-lg"></div>
    <p class="hk-spinner-legend-below">Loading...</p>
  </div>

  <div ng-show="unboundendpoints" >

    <hawkular-subtab class="hk-align-center hk-screen-top-nav">
      <div class="hk-nav-tabs-container">
        <ul class="nav nav-tabs nav-tabs-pf">
          <li><a href="/hawkular-ui/apm/btm" >Managed</a></li>
          <li class="active"><a href="/hawkular-ui/apm/btm/candidates">Candidates <i class="fa fa-flag" ng-hide="candidateCount === 0"></i></a></li>
          <li><a href="/hawkular-ui/apm/btm/ignored">Ignored</a></li>
        </ul>
      </div>
    </hawkular-subtab>

    <section id="active" class="hk-btm-candidates">

      <div class="row">
        <div class="col-lg-8 col-md-10 col-sm-12 hk-align-center">
          <form class="form-inline hk-btm-candidates" name="addTxnForm" role="form" novalidate="" >
            <div class="row hk-align-center">
              <div class="form-group input col-sm-6">
                <div class="input-group input-group-lg">
                  <input type="text" class="form-control" name="newTxnNameField"
                       ng-model="newTxnName" ng-model-options="{ updateOn: 'default blur'}"
                       placeholder="Transaction name"/>
                  <span class="input-group-btn">
                    <input class="btn btn-primary" type="submit" ng-disabled="!newTxnName" ng-click="addTxn()" value="Manage" />
                    <input class="btn btn-default" type="button" ng-disabled="!newTxnName" ng-click="ignoreTxn()" value="Ignore" />
                  </span>
                  <span class="input-group-btn">
                  </span>
                </div>
              </div>
              <div class="form-group input col-sm-6">
                <div class="input-group input-group-lg">
                  <select id="repeatSelect" class="form-control" ng-model="existingTxnName" >
                    <option value="">Select existing ....</option>
                    <option ng-repeat="txn in transactions" value="{{txn.name}}">{{txn.name}} ({{getLevel(txn.level)}})</option>
                  </select>
                  <span class="input-group-btn">
                    <input class="btn btn-primary" type="submit" ng-disabled="!existingTxnName || selectedendpoints.length == 0" ng-click="updateTxn()" value="Update" />
                  </span>
                </div>
              </div>
          </form>
        </div>
      </div>

      <div class="col-lg-8 col-md-10 col-sm-12 hk-align-center">
        <hr/>
        <div class="form-inline hk-candidates-search">
          <div class="form-group">
            <label for="searchField">Search:</label>
            <input ng-model="query" class="form-control" id="searchField"/>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-body">
          <div ng-repeat="uriinfo in unboundendpoints | filter:query" >
            <label>
              <input type="checkbox" name="selectedURIs[]"
                value="{{uriinfo.endpoint}}"
                ng-checked="isSelected(uriinfo)"
                ng-click="selectionChanged(uriinfo)"
                ng-disabled="!newTxnName &amp;&amp; !existingTxnName"/>
              <span ng-hide="!newTxnName &amp;&amp; !existingTxnName" style="color:black">{{uriinfo.endpoint}} : {{uriinfo.type}}</span>
              <span ng-show="!newTxnName &amp;&amp; !existingTxnName" style="color:grey"><i>{{uriinfo.endpoint}} : {{uriinfo.type}}</i></span>
            </label>
          </div>
          </div>
        </div>
    </section>
  </div>
</div>
